{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/system_set.css">
<style type="text/css">
	body{
		background-color: #f3f3f3;
	}
	.p1{
		width: 100%;
		height: 1.0rem;
		line-height: 1rem;
		font-size: 0.7rem;
		color: #B4B4B4;	
		text-align: center;
		position: absolute;
		top:3.6rem;
	}
	.phone_num{
		color: #323232;
		font-size: 0.9rem;
		height: 1.25rem;
		line-height: 1.25rem;
		width: 100%;
		text-align: center;
		position: absolute;
		top:5.25rem;
	}
	.verification_code{
		width: 93.6%;
		height: 2.5rem;
		border-bottom: 0.05rem solid #E1E1E1;
		left:3.2%;
		position: absolute;
		top:8.3rem;
		line-height: 2.5rem;
		font-size: 0.8rem;
		color: #323232;
	}
	.v_code{
		background-color: #f3f3f3;
		height: 1.1rem;
		line-height: 1.1rem;
		font-size: 0.8rem;
	}
	.code_status{
		width: 100%;
		height: 1.0rem;
		line-height: 1.0rem;
		font-size: 0.7rem;
		color: #B4B4B4;
		position: absolute;
		top:11.2rem;
		text-align: center;
	}
	.resend{
		height: 1.0rem;
		line-height: 1.0rem;
		font-size: 0.7rem;
		color: #0094FF;
		display: inline-block;
	}
	.next_step{
		width: 93.6%;
		height: 2.2rem;
		line-height: 2.2rem;
		font-size: 0.8rem;
		color: #fff;
		border-radius: 0.2rem;
		position: absolute;
		top:13.5rem;
		left:3.2%;
		text-align: center;
	}
	.grey{
		background-color: #D8D8D8;
	}
	.orange{
		background-color: #FF6600;
	}
</style>
{/block}
{block name="content"}
<div class="title">
	
	<div class="go_back"></div>
	<p><strong>忘记支付密码</strong></p>
	
</div>

<span class="p1">我们已发送 <span style="color: #323232;"><strong>验证码</strong></span> 到您的手机</span>

<span class="phone_num">{$mobile}</span>

<span class="verification_code">
	验证码
	<input type="tel" name="v_code" class="v_code" placeholder="手机验证码">
</span>

<span class="code_status"></span>

<span class="next_step grey">下一步</span>
<!--验证码已发送弹框-->
<div class="veri_sent">
	<span class="tanchuang_success"></span>
	<span class="w">验证码已发送</span>
</div>

<!--验证码错误弹框-->
<div class="veri_wrong">
	<span class="tanchuang_defeat"></span>
	<span class="w">验证码错误</span>
</div>
{/block}
{block name="js"}
{literal}
<script type="text/javascript">
	var time=60;
	var clock='';
	var clock2=''
	var is_click = false;
	clock =setInterval(doLoop, 1000);
	$('.code_status').html(time+'秒后重发');
	function doLoop()
	 {
	 	
		 time--;
		 if(time > 0){

		  $('.code_status').html(time+'秒后重发');
		 }
		 if(time==0)
		 {
		  clearInterval(clock); //清除js定时器
		  $('.code_status').html('收不到验证码？<span class="resend">重新发送</span>');
		  
		   
		   console.log(time);
		   time=60;
		   clearInterval(clock2);
		  
		 }
		 
	 }
	 
	 //点击重新发送
	 $('.code_status').on('click','.resend',function(){
	 	if(is_click == true) return;
		 is_click = true;
	 	$.ajax({
	 		type:'post',
			url:'/FrontUserCenter/verify_code',
			success:function (data) {
				if(data){
					//获取验证码
					get_veri();
					//重新开始倒计时
					var time =60;
					$('.code_status').html(time+'秒后重发');
					clock2=setInterval(doLoop,1000);
				}
				is_click = false;
			}
		})
	 });

	 $('.v_code').bind('input propertychange',function(){
	 	length = $('.v_code').val().length;
	 	console.log(length);
	 	if(length>0){
	 		$('.next_step').removeClass('grey');
	 		$('.next_step').addClass('orange');
	 	}
	 	if(length==0){
	 		$('.next_step').removeClass('orange');
	 		$('.next_step').addClass('grey');
	 	}
	 });
	 
	 //点击下一步，验证验证码的正确性，如果正确，跳转到设置新密码
	 $('.next_step').on('click',function(){
		var v_code = $('.v_code').val();
		 $.ajax({
		 	 type:'post',
		 	 url:'/FrontUserCenter/forget_pay_psw',
			 data:{v_code:v_code},
			 success:function (data) {
				 if(data.code == 1){
					 window.location.href = '/FrontUserCenter/modify_pay_psw/is_mobile_pw/1'
				 }else{


				 	$('.veri_wrong').fadeIn(1500);
				 	$('.veri_wrong').fadeOut(1500);



				 }
			 }
		 })

	 });
	 function get_veri(){
	 	$('.veri_sent').fadeIn(1500);
	 	$('.veri_sent').fadeOut(1500);
	 }
</script>
{/literal}
{/block}
